<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f8fafc; color: #1f2937; margin: 0; padding: 0; display: flex; justify-content: center; }
        .container { width: 100%; max-width: 480px; background-color: #ffffff; }
        /* Top navigation bar */
        .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: #ffffff; border-bottom: 1px solid #e5e7eb; }
        .logo { font-size: 18px; font-weight: bold; color: #374151; }
        .search-bar { flex: 1; padding: 8px; margin: 0 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #6b7280; }
        .message-icon { width: 24px; height: 24px; background-color: #e5e7eb; border-radius: 50%; position: relative; }
        .message-icon::after { content: ""; width: 8px; height: 8px; background-color: red; border-radius: 50%; position: absolute; top: 0; right: 0; }
        /* User information section */
        .user-info { display: flex; align-items: center; padding: 15px; background-color: #ffffff; border-bottom: 1px solid #e5e7eb; }
        .avatar { width: 50px; height: 50px; background-color: #e5e7eb; border-radius: 50%; margin-right: 15px; }
        .user-details { font-size: 14px; }
        .user-name { font-weight: bold; color: #374151; }
        .user-status { font-size: 12px; color: #6b7280; margin-top: 4px; }
        /* Quick access icon grid */
        .icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 15px 10px; background-color: #ffffff; text-align: center;}
        .icon-box { width: 40px; height: 40px; margin: 0 auto 5px; background-color: #e5e7eb; border-radius: 8px; }
        /* Sections styling */
        .section { background-color: #ffffff; padding: 15px; margin: 10px; border-radius: 8px; border: 1px solid #e5e7eb; }
        .section-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #3b82f6; }
        .item-card { background-color: #f9fafb; padding: 10px; border-radius: 8px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; }
        .item-box { width: 50px; height: 50px; background-color: #e5e7eb; border-radius: 8px; }
        .item-card-text { color: #374151; font-size: 14px; }
        /* Footer navigation */
        .footer { display: flex; justify-content: space-around; padding: 10px 0; background-color: #ffffff; border-top: 1px solid #e5e7eb; }
        .footer div { text-align: center; font-size: 12px; color: #6b7280; }
        .footer div .icon-square { width: 24px; height: 24px; border-radius: 4px; margin-bottom: 4px; }
    </style>
</head>
<body>
    <div class="container">

        <!-- Top Navigation Bar -->
        <div class="top-nav">
            <div class="logo">公司Logo</div>
            <input type="text" class="search-bar" placeholder="搜索内容">
            <div class="message-icon"></div>
        </div>

        <!-- User Information Section -->
        <div class="user-info">
            <div class="avatar"></div>
            <div class="user-details">
                <div class="user-name">用户名</div>
                <div class="user-status">工会认证状态：已认证</div>
            </div>
        </div>

        <!-- Quick Access Icon Grid -->
        <div class="icon-grid">
            <div><div class="icon-box"></div>工会活动</div>
            <div><div class="icon-box"></div>协会活动</div>
            <div><div class="icon-box"></div>福利管理</div>
            <div><div class="icon-box"></div>员工关爱</div>
        </div>

        <!-- Announcements Section -->
        <div class="section">
            <div class="section-title">公告与资讯</div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[新] 2024年度健康体检预约开始！</div>
            </div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[重要] 关于2024年年会活动安排的通知</div>
            </div>
        </div>

        <!-- Hot Activities Section -->
        <div class="section">
            <div class="section-title">热门活动</div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[工会秋季登山活动] 10月15日 | 上午9:00 | 北京植物园 | 剩余30个名额</div>
            </div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[协会瑜伽体验课] 10月20日 | 下午3:00 | 健康中心 | 报名中</div>
            </div>
        </div>

        <!-- Welfare Preview Section -->
        <div class="section">
            <div class="section-title">福利预告</div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[年度健康体检] | 有效期至12月31日</div>
            </div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[餐饮优惠券] | 即将发放 | 开始时间：11月20日</div>
            </div>
        </div>

        <!-- Messages Section -->
        <div class="section">
            <div class="section-title">消息提醒</div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[活动报名提醒] 秋季登山活动报名即将截止！</div>
            </div>
            <div class="item-card">
                <div class="item-box"></div>
                <div class="item-card-text">[福利使用提醒] 您的餐饮优惠券还有3天到期！</div>
            </div>
        </div>

        <!-- Footer Navigation -->
        <div class="footer">
            <div><div class="icon-square" style="background-color: #3b82f6;"></div>首页</div>
            <div><div class="icon-square" style="background-color: #f59e0b;"></div>活动</div>
            <div><div class="icon-square" style="background-color: #10b981;"></div>福利</div>
            <div><div class="icon-square" style="background-color: #6366f1;"></div>我的</div>
        </div>
    </div>
</body>
</html>
